<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一题</title>
    <script src="../tool/vue.js"></script>
    <script src="../tool/axios.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="../tool/jquery.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <script src="../tool/bootstrap.js" <script src="../tool/bootstrap.min.js"></script>
    <style>
        .kadd {
            position: absolute;
            width: 450px;
            height: 300px;
            margin-left: 40%;
            border: 2px solid black;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-self: center;
            align-items: center;
        }

        input {
            width: 250px !important;
            height: 35px;
        }

        button {
            width: 100px;
            height: 35px;
        }
    </style>
</head>

<body>
    <div id="app">
        <form class="navbar-form navbar-left" role="search">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="请输入姓名。。。" v-model="search">
            </div>
            <button type="button" class="btn btn-default" v-on:click="init">查询</button>
            <button type="button" class="btn btn-default" v-on:click="addblog=!addblog">添加</button>
        </form>

        <table class="table table-hover">
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>学号</th>
                <th>操作</th>

            </tr>
            <tr v-for="(item, index) in tabalData" :key="index">
                <td>{{index+1}}</td>
                <td>{{item.name}}</td>
                <td>{{item.code}}</td>
                <td>
                    <button v-on:click="openup(index)">编辑</button>
                    <button v-on:click="del(index)">删除</button>
                </td>
            </tr>
        </table>
        <!-- 添加框 -->
        <div v-show="addblog" class="kadd">
            <input type="text" placeholder="请输入学号" v-model="acode"><br>
            <input type="text" placeholder="请输入姓名" v-model="aname"><br>
            <button v-on:click="add">添加</button>
            <button v-on:click="addblog=!addblog">取消</button>
        </div>
        <!-- 编辑框 -->
        <div v-show="upblog" class="kadd">
            <input type="text" v-model="upfrom.code"><br>
            <input type="text" v-model="upfrom.name"><br>
            <button v-on:click="up">修改</button>
            <button v-on:click="upblog=!upblog">取消</button>
        </div>

        <!-- END -->
    </div>


    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                tabalData: [],
                search: "",
                tmpData: [{ code: "194033531", name: "罗涛涛" },
                { code: "194033532", name: "爱妃" },
                { code: "194033533", name: "阿鑫" },
                { code: "194033041", name: "配配" },
                { code: "194033536", name: "罗凯威" },
                { code: "194033546", name: "沈万三" },],
                addblog: false,
                acode: "",
                aname: "",
                upblog: false,
                upfrom: {},
                tpid: 0,
                tmpl:[]
                
            },
            methods: {
                init() {
                    if (this.search != "") {
                        this.tabalData = [];
                        for (let i = 0; i < this.tmpData.length; i++) {
                            if (this.tmpData[i].name.indexOf(this.search) != -1) {
                                this.tabalData.push(this.tmpData[i]);
                            }
                        }
                    } else {
                        this.tabalData = this.tmpData;
                    }
                },
                add() {
                    if (this.acode != "" && this.aname != "") {
                        this.tmpData.push({ code: this.acode, name: this.aname });
                        this.acode = "";
                        this.aname = "";
                        this.addblog = false;
                        console.log(this.tmpData)
                    } else {
                        window.alert("不可以添加空值哦！")
                    }
                },
                openup(i) {
                    this.upfrom = this.tabalData[i];
                    this.tpid=i;
                    this.upblog = true;

                },
                up(){
                    this.tabalData[this.tpid]=this.upfrom;
                    this.upblog = false;

                },
                del(i){
                    this.tmpl=[];
                    for (let index = 0; index < this.tabalData.length; index++) {
                        if(index!=i){
                            this.tmpl.push(this.tabalData[index]);
                        }
                    }
                    this.tabalData=this.tmpl;
                }

            },
            created() {
                this.init();
                // console.log(this.tabalData)
            }
        })
    </script>
</body>

</html>